<template>
  <div id="app">
    <div>
      <el-row>
        <el-container>
          <el-col :span="10">
            <el-aside width="400px">
              <div>
                <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> -->
                <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <el-menu-item href="#/" index="1"
                    ><el-link style="font-size: 24px" type="primary" href="#/"
                      >泊寓</el-link
                    ></el-menu-item
                  >
                  <el-submenu index="2">
                    <template slot="title">更多</template>
                    <el-menu-item index="2-1"
                      ><a
                        class="nav3"
                        type="primary"
                        href="http://localhost:9528/"
                        target="_blank"
                        >管理员登录</a
                      ></el-menu-item
                    >
                    <el-menu-item index="2-2"
                      ><a class="nav3" type="primary" href="#/rentSearch"
                        >租房</a
                      ></el-menu-item
                    >
                    <el-menu-item index="2-3"
                      ><a class="nav3" type="primary" href="#/fabuHouse"
                        >发布房源</a
                      ></el-menu-item
                    >
                    <el-menu-item index="2-4"
                      ><a class="nav4" type="primary" href="#/Iwant"
                        >发布找房需求</a
                      ></el-menu-item
                    >
                    <el-menu-item index="2-5"
                      ><a class="nav5" type="primary" href="#/jisuanqi"
                        >房贷计算器</a
                      ></el-menu-item
                    >
                    <el-menu-item index="2-6"
                      ><a class="nav6" type="primary" href="#/tucao"
                        >吐槽</a
                      ></el-menu-item
                    >
                  </el-submenu>
                  <!------------------- 登录前--------------------- -->
                  <el-menu-item v-if="!isUser" style="float: right" index="4">
                    <i class="el-icon-user"></i>
                    <el-button
                      @click="drawer1 = true"
                      type="text"
                      style="color: white"
                    >
                      登录
                    </el-button>
                    <el-button
                      @click="drawer2 = true"
                      type="text"
                      style="color: white"
                    >
                      注册
                    </el-button>
                  </el-menu-item>
                  <!-- -------------------登录后显示---------------- -->
                  <el-menu-item v-else style="float: right" index="4">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        <!-- <el-badge is dot class="item"> -->
                          <el-avatar
                            :size="50"
                            style="margin-top: -10px;margin-right:10px;"
                            :src="$store.state.user.uimg"
                            :URL="$store.state.user.uimg"
                          ></el-avatar>
                        <!-- </el-badge> -->
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          ><el-button
                            type="text"
                            style="color: gray; font-size: 16px"
                          >
                            <a class="nav4" type="primary" href="#/message"
                              >消息</a
                            >
                          </el-button>
                          <!-- <el-badge :value="2" class="item"> </el-badge> -->
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button
                            type="text"
                            style="color: gray; font-size: 16px"
                            @click="loginout"
                          >
                            退出登录
                          </el-button>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>

                    <el-button type="text" style="color: white">
                      <a href="#" style="text-decoration: none">{{
                        $store.state.user.uname
                      }}</a>
                    </el-button>
                  </el-menu-item>
                </el-menu>
              </div>

              <div>
                <img
                  style="
                    margin-top: 25%;
                    width: 200px;
                    weight: 200px;
                    float: center;
                    margin-right: 22%;
                  "
                  src="../src/img/by.png"
                  alt=""
                />
                <i
                  style="
                    color: black;
                    float: left;
                    margin-top: 30px;
                    margin-left: 30px;
                    border: 2px solid;
                    font-size: 18px;
                    border-radius: 14px;
                    padding: 4px 4px 4px 4px;
                  "
                  id="location"
                  class="el-icon-location"
                  >青岛</i
                >
                <div v-if="!isUser">
                  <p style="font-size: 36px">温暖，触手可及</p>
                </div>
                <div
                  style="float: center; margin-top: 10px; margin-bottom: 30px"
                  v-else
                >
                  <span style="font-size: 36px">你好,</span>
                  <span style="font-size: 36px"
                    ><a class="name" href="#/usermessage">{{
                      $store.state.user.uname
                    }}</a></span
                  >
                </div>
              </div>
              <!-- ----------------搜索框----------- -->
              <div id="search">
                <el-input
                  placeholder="请输入小区名或详细地址"
                  v-model="input3"
                  class="input-with-select"
                >
                  <el-select
                    v-model="select"
                    slot="prepend"
                    placeholder="请选择"
                  >
                    <el-option label="市南区" value="1"></el-option>
                    <el-option label="市北区" value="2"></el-option>
                    <el-option label="崂山区" value="3"></el-option>
                    <el-option label="李沧区" value="4"></el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-aside>
          </el-col>
          <!-- <el-col :span="1"></el-col> -->
          <el-col :span="24">
            <el-container>
              <el-main>
                <div style="height: auto">
                  <div id="drawer1" style="height: 10px">
                    <el-drawer
                      size="22%"
                      :visible.sync="drawer1"
                      direction="ltr"
                      :with-header="false"
                    >
                      <br />
                      <span
                        style="
                          margin-left: 40%;
                          font-size: 20px;
                          fongt-weight: bold;
                          color: orange;
                        "
                        >登录</span
                      >
                      <p style="margin-left: 30%">
                        没有账号?
                        <el-button
                          @click="drawer2 = true"
                          type="text"
                          style="font-size: 16px"
                          >去注册！</el-button
                        >
                      </p>
                      <div style="width: 90%; margin-top: 30%">
                        <el-form
                          ref="loginForm"
                          :model="loginForm"
                          label-width="80px"
                          size="mini"
                          :rules="rules"
                        >
                          <el-form-item required label="邮箱" prop="uemail">
                            <el-input v-model="loginForm.uemail"></el-input>
                          </el-form-item>
                          <el-form-item required label="密码" prop="upwd">
                            <el-input
                              v-model="loginForm.upwd"
                              show-password
                            ></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-link
                              @click="toBackpwd()"
                              style="
                                font-size: 14px;
                                color: gray;
                                text-decoration: none;
                              "
                              ><p class="forget">忘记密码</p></el-link
                            >
                            <!-- <router-link to="rebackpwd1" >忘记密码</router-link> -->
                          </el-form-item>
                          <el-form-item size="medium" style="margin-left: 0px">
                            <el-button type="primary" @click="handleLogin"
                              >立即登录</el-button
                            >
                            <el-button @click="handleCancel">取消</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                    </el-drawer>
                  </div>
                  <div id="drawer2" style="height: 10px">
                    <el-drawer
                      size="22%"
                      title="我是标题"
                      drawer-style="{'background-color':'#35495e', height:'550px'}"
                      :visible.sync="drawer2"
                      direction="ltr"
                      :with-header="false"
                    >
                      <br />
                      <span
                        style="
                          margin-left: 45%;
                          font-size: 20px;
                          fongt-weight: bold;
                          color: orange;
                        "
                        >注册</span
                      >

                      <!-- --------------注册表单--------------- -->
                      <div style="width: 90%; margin-top: 2%">
                        <el-form
                          ref="submitForm"
                          :model="submitForm"
                          label-width="80px"
                          size="mini"
                          :rules="rules"
                        >
                          <!-- ---------------头像------------------ -->
                          <div
                            style="width: 60%; height: 28%; margin-left: 10%"
                          >
                            <el-form-item
                              label="上传图片"
                              ref="uploadElement"
                              prop="uimg"
                            >
                              <el-input
                                v-model="submitForm.uimg"
                                v-if="false"
                              ></el-input>
                              <el-upload
                                class="avatar-uploader"
                                action=""
                                ref="upload"
                                :show-file-list="false"
                                :before-upload="beforeUpload"
                                :on-change="handleChange"
                                :auto-upload="false"
                                :data="submitForm"
                                :limit="1"
                              >
                                <img
                                  v-if="submitForm.uimg"
                                  :src="submitForm.uimg"
                                  class="avatar"
                                />
                                <i
                                  v-else
                                  class="el-icon-plus avatar-uploader-icon"
                                ></i>
                              </el-upload>
                            </el-form-item>
                          </div>
                          <!-- <p
                            style="
                              font-size: 18px;
                              color: lightblue;
                              text-align: center;
                              margin-top: -30px;
                            "
                          >
                            上传头像
                          </p> -->
                          <el-form-item required label="用户名" prop="uname">
                            <el-input v-model="submitForm.uname"></el-input>
                          </el-form-item>
                          <el-form-item required label="手机号" prop="uphone">
                            <el-input v-model="submitForm.uphone"></el-input>
                          </el-form-item>
                          <el-form-item required label="邮箱" prop="uemail">
                            <el-input v-model="submitForm.uemail"></el-input>
                          </el-form-item>
                          <el-form-item required label="密码" prop="upwd">
                            <el-input
                              v-model="submitForm.upwd"
                              show-password
                            ></el-input>
                          </el-form-item>
                          <el-form-item label="生日">
                            <el-col :span="11">
                              <el-date-picker
                                type="date"
                                placeholder="公历"
                                v-model="submitForm.ubirthday"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                              ></el-date-picker>
                            </el-col>
                          </el-form-item>

                          <el-form-item required label="性别">
                            <el-radio-group
                              style="margin-left: 0px"
                              v-model="submitForm.ugender"
                              size="medium"
                            >
                              <el-radio label="男"></el-radio>
                              <el-radio
                                style="margin-left: -10px"
                                label="女"
                              ></el-radio>
                            </el-radio-group>
                          </el-form-item>
                          <el-form-item size="medium" style="margin-left: 0px">
                            <el-button
                              type="primary"
                              @click="formSubmit('submitForm')"
                              >立即注册</el-button
                            >
                            <el-button @click="resetForm('submitForm')"
                              >重置</el-button
                            >
                          </el-form-item>
                        </el-form>
                      </div>
                    </el-drawer>
                  </div>
                  <router-view></router-view>
                </div>
              </el-main>
            </el-container>
          </el-col>
        </el-container>
      </el-row>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import { login } from "@/network/user";
import { register } from "@/network/user";
import { logout } from "@/network/user";
export default {
  name: "App",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        // if (!Number.isInteger(value)) {
        //   callback();
        // } else {
        if (value.length != 11) {
          callback(new Error("长度必须为11位,此时长度为" + value.length));
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    return {
      submitForm: {
        uid: "",
        uname: "",
        uphone: "",
        ubirthday: "",
        uemail: "",
        ugender: "",
        upwd: "",
        uimg: "",
      },
      loginForm: {
        uemail: "",
        upwd: "",
      },
      rules: {
        uname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在2到5个字符", trigger: "blur" },
        ],
        upwd: [{ validator: validatePass, trigger: "blur" }],
        uemail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        uphone: [
          { validator: checkPhone, trigger: "blur" },
          // {min:11,max:11,message:'长度必须为11位',trigger:'blur'},
        ],
        uimg: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },

      activeIndex: "1",
      activeIndex2: "1",
      drawer1: false,
      drawer2: false,
      // input1: "",
      // input2: "",
      input3: "",
      select: "",
      currentDate: new Date(),
      // target:''
      param: "",
    };
  },
  computed: {
    isUser() {
      console.log(this.$store.state.user.uid);
      if (this.$store.state.user.uid === "") {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.submitForm.uimg = "";
    },
    formSubmit(formName) {
      // this.param.append('user', this.submitForm);
      this.param.append("uid", this.submitForm.uid);
      this.param.append("uname", this.submitForm.uname);
      this.param.append("ugender", this.submitForm.ugender);
      this.param.append("uphone", this.submitForm.uphone);
      this.param.append("ubirthday", this.submitForm.ubirthday);
      this.param.append("uemail", this.submitForm.uemail);
      this.param.append("upwd", this.submitForm.upwd);
      this.param.append("uimg", this.submitForm.uimg);

      register(this.param).then((res) => {
        if (res.status) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
          // 清空表单信息
          this.submitForm = {};
          this.drawer1 = true;
          this.drawer2 = false;
          this.param.delete("uid");
          this.param.delete("uname");
          this.param.delete("upwd");
          this.param.delete("uphone");
          this.param.delete("ubirthday");
          this.param.delete("ugender");
          this.param.delete("uemail");
          this.param.delete("uimg");
          // 刷新数据
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange(file, fileList) {
      this.submitForm.uimg = URL.createObjectURL(file.raw);
      this.param = new FormData();
      this.param.append("file", file.raw, file.name);
    },
    beforeUpload(file) {
      return true;
    },
    onSubmit() {},
    handleLogin() {
      console.log("handleLogin");
      login(this.loginForm).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
          let params = {
            uname: this.loginForm.uname,
            upwd: this.loginForm.upwd,
          };
          this.$store
            .dispatch("Login", params)
            .then(() => {
              this.$router.push({ path: "/" });
            })
            .catch((error) => {
              console.log(error.response);
            });
          console.log("user", this.$store.state.user);
          // 清空表单信息
          this.loginForm = {};
          this.drawer1 = false;
          this.drawer2 = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleCancel() {
      this.drawer1 = false;
    },
    toBackpwd(){
      this.$router.push({ path: "/rebackpwd1" });
      this.drawer1 = false;
    },
    loginout() {
      logout().then((res) => {
        if (res.status) {
          console.log("$message前");
          this.$message({
            message: res.msg,
            type: "success",
          });
          console.log("进入logout方法前")
          this.$store.dispatch("LogOut").then(() => {
            //跳转到首页
            this.$router.push("/");
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.log(err)
      });
    },
  },
};
</script>

<style>
html,
body,
#app,
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 100px;
  margin-top: 0px;
}

.el-aside {
  position: fixed;
  background-color: #dcf5eb;
  /* background-color: lightyellow; */
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: #fff;
  color: #333;
  /* text-align: center; */
  padding: 0;
}

body > .el-container {
  /* margin-bottom: 100px; */
  position: relative;
}

.el-select .el-input {
  width: 90px;
}
.input-with-select .el-input-group__prepend {
  background-color: rgb(196, 243, 187);
  /* background-color: lightyellow; */
}
.el-input-group {
  width: 85%;
  position: relative;
  padding-bottom: 100px;
}
.el-drawer.ltr {
  height: 550px;
  margin-top: 100px;
  margin-left: 40px;
  border-radius: 10px;
}

.el-carousel__item h3 {
  /* color: #475669; */
  font-size: 18px;
  opacity: 0.75;
  line-height: 00px;
  margin: 0;
}
.search {
  margin-top: 300px;
}

.el-carousel__container {
  height: 450px;
}
.address {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-col-8 {
  width: 28%;
}
.el-col-offset-2 {
  margin-left: 5%;
}
.el-card {
  border-radius: 2%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #e25252;
  border-radius: 100%;
  margin-top: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #2770b9;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.nav3 {
  color: white;
  text-decoration: none;
}
.nav3:hover {
  color: aquamarine;
}
.nav4 {
  color: white;
  text-decoration: none;
}
.nav4:hover {
  color: aquamarine;
}
.nav5 {
  color: white;
  text-decoration: none;
}
.nav5:hover {
  color: aquamarine;
}
.nav6 {
  color: white;
  text-decoration: none;
}
.nav6:hover {
  color: aquamarine;
}
.name {
  color: darkgray;
  text-decoration: none;
}
.name:hover {
  color: black;
}
.el-footer {
  height: 100px !important;
  /* border:1px solid red; */
  background-color: #f5f5f6;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.forget:hover {
  color: black;
}
</style>
